<template>
   <div class="shop">
      <ShopHeader />
      <div class="tab">
         <div class="tab-item">
            <router-link :to="`/shop/${$route.params.id}/goods`" replace
               >点餐</router-link
            >
         </div>
         <div class="tab-item">
            <router-link :to="`/shop/${$route.params.id}/ratings`" replace
               >评价</router-link
            >
         </div>
      </div>
      <keep-alive>
         <router-view />
      </keep-alive>
   </div>
</template>

<script>
import ShopHeader from "@/components/ShopHeader/ShopHeader";

//vuex
import { mapActions, mapMutations } from "vuex";

export default {
   name: "Shop", // 商品详情页面
   components: {
      ShopHeader,
   },
   methods: {
      ...mapActions('mstite', ['getShopComments']),
      ...mapMutations("mstite", ['SAVE_BY_ID', 'CLEAR_COMMENTS']),
   },
   mounted() {
      const shopId = this.$route.params.id
      // 存储对应店铺信息
      this.SAVE_BY_ID(shopId);
      // 获取店铺评论数据
      this.getShopComments(shopId)
      // 跳转到默认的子路由
      this.$router.replace(`/shop/${shopId}/goods`);
   },
   beforeDestroy() {
      // 清空存储在状态中的店铺评论
      this.CLEAR_COMMENTS()
   }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.shop {
   min-height: 100vh;
   padding: 45px 0 56px;
   box-sizing: border-box;
}

.cart {
   position: fixed;
   bottom: 100px
}

.tab {
   height: 40px;
   line-height: 40px;
   background: #fff;
   bottom-border-1px(rgba(7, 17, 27, 0.1));
   display: flex;
   justify-content: center;

   .tab-item {
      float: left;
      width: 33.33333%;
      text-align: center;
      font-size: 14px;
      color: rgb(77, 85, 93);

      a {
         display: block;
         position: relative;

         &.router-link-active {
            color: #02a774;

            &::after {
               content: '';
               position: absolute;
               left: 50%;
               bottom: 1px;
               width: 35px;
               height: 2px;
               transform: translateX(-50%);
               background: #02a774;
            }
         }
      }
   }
}
</style>